<template>
	<view>
	<!-- 轮播图 -->
		  <swiper  indicator-dots indicator-color="rgba(255,255,255,0.5)"
		   indicator-active-color="#fff" circular autoplay interval="3000">
		   <swiper-item><image src="/static/images/roll/1.jpg"></image></swiper-item>
		   <swiper-item><image src="/static/images/roll/2.jpg"></image></swiper-item>
		   <swiper-item><image src="/static/images/roll/3.jpg"></image></swiper-item>
		   </swiper> 
          <!-- <view class="info">
			   <text><text class="iconfont icon-haowubang"></text>好物商城</text>
			   <text><text class="iconfont icon-tesetuijian"></text>食谱推荐</text>
			   <text><text class="iconfont icon-jianfei"></text>减肥瘦身</text>
			   <text><text class="iconfont icon-shanshiguanli1"></text>合理膳食</text>
		   </view> -->
		<view class="navList">
			<view class="nav-item"  v-for="item in navList" @click="changeNav(item)">
				<view class="nav-item-icon" :class="{'special': item.text === '每日一答' || item.text === '食谱'}" >
					<i class="iconfont" :class="item.icon"></i>
				</view>
				<view class="nav-item-text">
					{{item.text}}
				</view>		
			</view>
		</view>
		<!-- 推荐信息 -->
		<view class="good-new">
			<scroll-view  class="scroll-x" scroll-x="true">
				<view class="good">
					<view class="good-item">
						<image src="../../static/images/food.jpg"></image>
						<text style="font-weight: bold;">20天轻松瘦身</text>
						<text>每日减肥餐</text>
					</view>
				</view>
				<view class="good">
					<view class="good-item">
						<image src="../../static/images/exercise.jpg"></image>
						<text style="font-weight: bold;">减肥成功</text>
						<text>日常锻炼分享</text>
					</view>
				</view>
				<view class="good1">
					<view class="good-item">
						<image src="../../static/images/food.jpg"></image>
						<text style="font-weight: bold;">减肥餐</text>
						<text>瘦身</text>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				navList:[
					{
						icon:"icon-shipu",
						text:"食谱",
						pageUrl:"/pages/record/record",
						special: true,
						isTab:true	
					},
					{
						icon:"icon-paixing",
						text:"排行",
						pageUrl:"",
						isTab:false
						
						
					},
					{
						icon:"icon-qiyehongheibang",
						text:"红黑榜",
						pageUrl:"",
						isTab:false
						
					},
					{
						icon:"icon-quanzi",
						text:"减肥圈",
						pageUrl:"",
						isTab:false
						
					},
					{
						icon:"icon-scan",
						text:"AI识食",
						pageUrl:"",
						isTab:false
						
					},
					{
						icon:"icon-jiaoliu",
						text:"好友交流",
						pageUrl:"",
						isTab:false
						
					},
					{
						icon:"icon-sousuo",
						text:"每日一答",
						pageUrl:"/pages/homequestion/homequestion",
						special: true ,
						isTab:false
						
					},
					{
						icon:"icon-liwuhuodong",
						text:"活动促销",
						pageUrl:"/pages/discount/discount",
						isTab:false		
					}
				]
				
			}
		},
		methods: {
			changeNav(nav){
				console.log(nav);
				if(nav.isTab){
					uni.switchTab({
						url:nav.pageUrl
					})
				}else{// 跳转到非tab页面
				uni.navigateTo({
					url:nav.pageUrl
				})
					
				}	
			}
			
		}
	}
</script>





<style>
	.good-new {
	  background-color: #fff;
	  padding: 24rpx;
	  border-radius: 16rpx;
	  font-size: 24rpx;
	  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	.scroll-x {
	  width: 100%;
	  white-space: nowrap;
	}
	
	.good, .good1 {
	  display: inline-block;
	  width: 280rpx;
	  height: 380rpx;
	  margin-right: 20rpx;
	  transition: all 0.3s ease;
	}
	
	.good:active, .good1:active {
	  transform: scale(0.98); /* 点击效果 */
	}
	
	.good-item {
	  display: flex;
	  flex-direction: column;
	  height: 100%;
	}
	
	.good-item image {
	  width: 100%;
	  height: 280rpx;
	  border-radius: 12rpx;
	  object-fit: cover;
	  margin-bottom: 12rpx;
	}
	
	.good-item text {
	  font-size: 26rpx;
	  color: #333;
	  margin-bottom: 6rpx;
	  white-space: nowrap;
	  overflow: hidden;
	  text-overflow: ellipsis;
	}
	
	.good-item text:first-of-type {
	  font-weight: bold;
	  color: #14AF9A; /* 主色调统一 */
	}
	.good1{
		margin-right: 0rpx;
	}
	/* .good-new{
		background-color: #fff;
		padding: 16rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
	}
	.scroll-x{
		width: 100%;
		white-space: nowrap;
	}
	.good{
		display: inline-block;
		width: 320rpx;
		height: 420rpx;
		margin-right: 16rpx;	
	}
	.good-item{
		display: flex;
		flex-direction: column;
		justify-content: space-between;	
	}
	.good-item image{
		width: 100%;
		height: 320rpx;
	}
	.good1{
		display: inline-block;
		width: 320rpx;
		height: 420rpx;
		margin-right: 0rpx;	
		
	} */
	
	/* page{
		background-color: #efefef;
		display: flex;
		box-sizing: border-box;
		flex-direction: column;
	} */
	page {
	  background-color: #f5f7fa; /* 更柔和的背景色 */
	  display: flex;
	  flex-direction: column;
	  box-sizing: border-box;
	  padding: 20rpx; /* 添加页面内边距 */
	  min-height: 100vh;
	}
	.info {
	  display: flex;
	  justify-content: space-between;
	  background-color: #fff;
	  padding: 24rpx;
	  border-radius: 16rpx;
	  margin-bottom: 24rpx;
	  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	.info text {
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  font-size: 26rpx;
	  color: #333;
	}
	
	.info .iconfont {
	  font-size: 48rpx;
	  margin-bottom: 8rpx;
	  color: #14AF9A; /* 主色调统一 */
	}
	
	/* .info{
		display: flex;
		justify-content: space-between;
		background-color: #fff;
		padding: 24rpx;
	} */
	/* swiper{
	  height: 350rpx;
	  width: 100%;
	}
	swiper-item image{	
		  width: 100%;
		  height: 100%;
	} */
	swiper {
	  height: 380rpx; /* 稍微增加高度 */
	  width: 100%;
	  border-radius: 16rpx; /* 添加圆角 */
	  overflow: hidden;
	  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08); /* 添加轻微阴影 */
	  margin-bottom: 24rpx;
	}
	
	swiper-item image {
	  width: 100%;
	  height: 100%;
	  object-fit: cover; /* 确保图片比例正确 */
	}
	/* .navList{
		background-color: #fff;
		border-radius: 20px;
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		
		
		
	}
	.nav-item{
		flex: 1;
		padding: 2vh;
	
	}
	.nav-item-icon{
		text-align: center;
		color: #14AF9A ;
		background-color: #E0FCFC ;
		
		border-radius: 10px;
	}
	.nav-item-icon.special {
		background-color: #FCF0DC !important;
		color:#F7AD21 !important;
	}
	.nav-item-text{
		margin-top: 1vh;
		text-align: center;
	}
	i{
		font-size: 8vh;
	} */
.navList {
  background-color: #fff;
  border-radius: 16rpx;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  padding: 10rpx 0;
  margin-bottom: 24rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.nav-item {
  flex: 0 0 25%; /* 每行4个 */
  padding: 20rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-item-icon {
  text-align: center;
  color: #14AF9A;
  background-color: #E0FCFC;
  border-radius: 16rpx;
  width: 100rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease; /* 添加过渡效果 */
}

.nav-item-icon.special {
  background-color: #FCF0DC;
  color: #F7AD21;
}

.nav-item-icon i {
  font-size: 80rpx; /* 调整图标大小 */
}

.nav-item-text {
  margin-top: 12rpx;
  text-align: center;
  font-size: 26rpx;
  color: #333;
}


</style>
